﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/css/h-ui.admin.pro.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>图片列表</title>
</head>
<body>
	<!--_menu 作为公共模版分离出去-->
	<aside class="Hui-admin-aside-wrapper">
		<div class="Hui-admin-logo-wrapper">
			<a class="logo navbar-logo" href="/aboutHui.shtml">
				<i class="va-m iconpic global-logo"></i>
				<span class="va-m">H-ui.admin</span>
			</a>
		</div>
		<div class="Hui-admin-menu-dropdown bk_2">
			<ul class="Hui-menu"></ul>
		</div>
	</aside>
	<div class="Hui-admin-aside-mask"></div>

	<div class="Hui-admin-dislpayArrow">
		<a href="javascript:void(0);" onClick="displaynavbar(this)">
			<i class="Hui-iconfont Hui-iconfont-left">&#xe6d4;</i>
			
		</a>
	</div>
	<!--/_menu 作为公共模版分离出去-->

	<section class="Hui-admin-article-wrapper">
		<!--_header 作为公共模版分离出去-->
		<header class="Hui-navbar">
			<div class="navbar">
				<div class="container-fluid clearfix">
          <nav id="Hui-topNav" class="nav navbar-nav">
            <ul class="clearfix">
              <li><a href="">顶部菜单</a></li>
              <li class="dropDown dropDown_hover">
                <a class="dropDown_A" href="javascript:;">顶部菜单</a>
                <ul class="dropDown-menu menu radius box-shadow">
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
					<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar">
						<ul class="clearfix">
							<li>超级管理员</li>
							<li class="dropDown dropDown_hover"> <a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
									<li><a href="#">切换账户</a></li>
									<li><a href="#">退出</a></li>
								</ul>
							</li>
							<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
							<li id="Hui-skin" class="dropDown dropDown_hover right">
								<a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" data-val="default" title="默认（蓝色）">默认（深蓝）</a></li>
									
									<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
									<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
									<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
									<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
		<!--/_header 作为公共模版分离出去-->

		<div class="Hui-admin-article">
			<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
				首页
				<span class="c-gray en">/</span>
				图片管理
				<span class="c-gray en">/</span>
				图片列表
			</nav>

			<article class="Hui-admin-content clearfix">
				<div class="panel">
					<div class="panel-body"发布>
						<!-- 一个隐藏框，用来存放当前页面显示的维修状态0-未处理；1-处理中；2-已处理 -->
						<div><input type="text" hidden id="state" name="state"></div>
						<div class="text-c"> 日期范围：
							<input type="text" id="search-datetime-start" class="input-text datetimepicker-input" style="width:120px;">
							-
							<input type="text" id="search-datetime-end" class="input-text datetimepicker-input" style="width:120px;">
							<input type="text" name="title" id="title" placeholder=" 标题字段" style="width:250px" class="input-text">
							<button name="" id="search-submit" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜标题</button>
						</div>
					</div>
				</div>
				<div class="panel mt-20">
					<div class="panel-body"发布>
						<div class="clearfix">
							<span class="r">共有数据：<strong>54</strong> 条</span>
						</div>
						<div class="mt-20 clearfix">
							<table id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
								<thead>
									<tr class="text-c">
										<!--<th width="40"><input name="" type="checkbox" value="all"></th>-->
										<th width="80">编号</th>
										<th width="100">标题</th>
										<th width="150">图片</th>
										<th width="110">位置</th>
										<th width="150">详细描述</th>
										<th width="150">发布时间</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody class="getData-list">
									<tr class="text-c">
										<!--<td><input name="" type="checkbox" value="001"></td>
										<td>001</td>
										<td>分类名称</td>
										<td><a href="javascript:;" onClick="picture_edit('图库编辑','picture-show.html','10001')"><img width="100" class="picture-thumb" src="temp/1.jpg"></a></td>
										<td class="text-l"><a class="maincolor" href="javascript:;" onClick="picture_edit('图库编辑','picture-show.html','10001')">图片相册标题</a></td>
										<td class="text-c">标签</td>
										<td>2014-6-11 11:11:42</td>
										<td class="td-manage"><a style="text-decoration:none" onClick="picture_stop(this,'10001')" href="javascript:;" title="下架">下架</a> <a style="text-decoration:none" class="ml-5" onClick="picture_edit('图库编辑','picture-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onClick="picture_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
									-->
									</tr>
								</tbody>
							</table>
						</div>
						<div id="laypage" class="text-c"></div>
					</div>
				</div>
			</article>
		</div>
	</section>

	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="static/h-ui.admin.pro/js/h-ui.admin.pro.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	
	<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main2.js"></script>
	<script type="text/javascript">

		// 页面数据渲染
		function getDataList(options) {
			// options是搜索的前端数据的封装
			console.log(options);

			$.ajax({
				url: '/maintainDormitory?action=dealMaintainDormitory',// 跳转到 action, 换成自己的接口
				data: options,
				type: 'get',
				cache: false,
				dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
				success: function(respData) {
					console.log(respData);
					if(respData.result){ // 请求正确 返回true, 也指200状态
						var data = respData.datas; // 返回的数据
						var htmlstr = '';
						if(data.length > 0 ) {
							// 只有获取的数据对象长度大于0，我们才做for循环处理。
							for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
								//console.log(data[i].image_url);
								var images = JSON.parse(data[i].image_url);
								console.log(images.length);
								htmlstr +=
										'<tr>'+
										'<td>'+ ((respData.pagination.currPage-1)*(respData.pagination.pageSize)+(i+1)) +'</td>'+
										'<td>'+ data[i].title +'</td>';
								htmlstr +='<td>';
										for (var j =0 ;j<images.length;j++) {
											htmlstr += '<img width="100" class="picture-thumb" src=./images/'+ images[j] +' />';
										}
								htmlstr	+= '</td>';
								htmlstr +=
										'<td>'+ data[i].apartment_name + data[i].floor + '栋' + data[i].door_num +'</td>'+
										'<td>'+ data[i].desc +'</td>'+
										'<td>'+format(new Date(data[i].create_time))+'</td>';
								// data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
								if(options.state == '0'){
									htmlstr += '<td class="td-status"><input type="button" onclick="handle(this.id)" id="'+data[i].id+'" value="开始处理" style="width: 76px;height: 33px;color: red"></td>';
								}
								if(options.state == '1'){
									htmlstr += '<td class="td-status"><input type="button" onclick="handle(this.id)" id="'+data[i].id+'" value="处理完毕" style="width: 76px;height: 33px;color: green"></td>';
								}
								if(options.state == '2'){
									htmlstr += '<td class="td-status"><span class="label label-default radius">已经处理完毕</span></td>';
								}
								htmlstr += '</tr>';
							}
							// 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
							$(".getData-list").html(htmlstr);

							// 渲染分页
							laypage({
								cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
								pages: Math.ceil(respData.pagination.total/respData.pagination.pageSize),  // 除法运算，向上取整
								curr: respData.pagination.currPage,    //初始化当前页
								hash: 'page',
								limits: [10, 25, 50, 100],
								first: '首页',
								last: '尾页',
								prev: '<em>&lt;&lt;</em>',
								next: '<em>&gt;&gt;</em>',
								jump: function(e, first){ //触发分页后的回调
									console.log(e);
									if(!first) {
										$(".getData-list").attr("data-currPage", e.curr);
										runGetDataList();
									}
								}
							});
						}else {
							console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
							var tdNum = $("#data-table-list thead tr td").length;
							htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null">数据为空</td></tr>';
							$(".getData-list").html(htmlstr);
						}
						$("#totalNum").html(respData.pagination.total);
					}else {
						$("#totalNum").html('0');
						console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
					}
				},
				error: function(respData){ // ajax的error状态
					console.log(respData);
				}
			});

		}


		// 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
		function runGetDataList(){
			getDataList({
				state : $("#state").val() || -1, // 状态id
				currPage : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
				pageSize: 5, // 每页几条
				startTime : $("#search-datetime-start").val() || '',
				endTime : $("#search-datetime-end").val() || '',
				title : $("#title").val() || '',
			});
		}

		// 点击开始处理，或处理完成按钮事件
		function handle(id) {
			var state = $("#state").val();
			console.log(state);
			$.ajax({
				method:"post",
				url:"maintainDormitory?action=handleMaintainDormitory",
				data:{"id":id, "state": state},
				success:function (result){
					console.log(result);
					alert(result.msg);
					location.reload();
				}
			});

		}

		//格式化时间函数
		function format(dat){
			//获取年月日，时间
			var year = dat.getFullYear();
			var mon = (dat.getMonth()+1) < 10 ? "0"+(dat.getMonth()+1) : dat.getMonth()+1;
			var data = dat.getDate()  < 10 ? "0"+(dat.getDate()) : dat.getDate();
			var hour = dat.getHours()  < 10 ? "0"+(dat.getHours()) : dat.getHours();
			var min =  dat.getMinutes()  < 10 ? "0"+(dat.getMinutes()) : dat.getMinutes();

			var newDate = year +"-"+ mon +"-"+ data +" "+ hour +":"+ min;
			return newDate;
		}


		// JQ获取地址栏参数
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]); return null;
		}


		$(function(){
			getMenu();
			runDatetimePicker();	// 搜索的日期范围

			// 将地址栏传的类型参数存入隐藏输入框中
			var state = GetQueryString("state");
			console.log(state);
			$("#state").val(state);

			runGetDataList();
			// 点击搜索执行...
			$("#search-submit").on("click",function(){
				runGetDataList();
			});

			/* =====列表页的业务脚本可参考article-list.html 这个页面 ====== */


			/*// 全选代码
			$("#data-table-list").HuicheckAll(
				{
					checkboxAll: 'thead input[type="checkbox"]',  // 表头全选的checkbox
					checkbox: 'tbody input[type="checkbox"]' // 列表开头的checkbox
				},
				function(checkedInfo) {
					console.log(checkedInfo); // checkedInfo 就是选择后返回的参数，请根据自己的业务接口进行二次加工。
				}
			)*/

		});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
